<!-- 页面说明 -->
<template>
  <main class="page-main">

    <a-form :model="formData" name="basic" autocomplete="off" :label-col="{ span:6 }" @finish="onFinish"
      @finishFailed="onFinishFailed">
      <a-form-item label='账号' name='accountNo' :rules='rules.accountNo'>
        <a-input v-model:value='formData.accountNo' />
      </a-form-item>
      <a-form-item label='用户名' name='userName' :rules='rules.userName'>
        <a-input v-model:value='formData.userName' />
      </a-form-item>
      <a-form-item label='昵称' name='nickName'>
        <a-input v-model:value='formData.nickName' />
      </a-form-item>
      <a-form-item label='邮箱' name='email'>
        <a-input v-model:value='formData.email' />
      </a-form-item>
      <a-form-item label='手机号' name='phone'>
        <a-input v-model:value='formData.phone' />
      </a-form-item>
      <a-form-item label='角色' name='roleId'>
        <a-select class="width" v-model:value="formData.roleId" :options="roleList" placeholder="请选择角色"></a-select>
      </a-form-item>
      <a-form-item label='组织' name='organizationId'>
        <a-tree-select v-model:value='formData.organizationId' :tree-data="orgTree" placeholder="请选择组织">
        </a-tree-select>
      </a-form-item>
      <div>
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button class="margin-left-40" @click="handleClose">取消</a-button>
      </div>


    </a-form>
  </main>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as apiUtil from '@/api/ApiUtils'
import * as api from '@/api/AuthUserApi'
import {AuthUser} from "@/api/AuthUserApi";
import * as roleApi from '@/api/AuthRoleApi'
import * as orgApi from '@/api/AuthOrganizationApi'
import { notification } from 'ant-design-vue'



// ============ Props & Emits ============
const props = defineProps<{
  dataId: number | null
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'successed'): void
}>()

// ============ 响应式状态 ============
const formData = ref<AuthUser>(new AuthUser())
const rules = {
  accountNo: [{ required: true, message: '账号必填!' }],
  userName: [{ required: true, message: '用户名必填!' }],
}
const roleList = ref<any[]>([])
const orgTree = ref<any[]>([])

// ============ 计算属性 - actionType ============
const actionType = ref<string>('添加')

// ============ 方法定义 ============
function onFinish(values: any) {
  console.log('Success:', values)
  handleSave()
}

function onFinishFailed(errorInfo: any) {
  console.log('Failed:', errorInfo)
}

function handleClose() {
  emit('close')
}

function handleSuccessed() {
  emit('successed')
}

function handleSave() {
  if (!props.dataId) {
    api.add(formData.value).then((res) => {
      if (apiUtil.isSuccessed(res)) {
        handleSuccessed()
        handleClose()
        notification.success({
          message: `${actionType.value}成功`,
          description: `${actionType.value}成功`,
        })
      } else {
        notification.error({
          message: '提交失败',
          description: res.message,
        })
      }
    })
  } else {
    api.save(formData.value).then((res) => {
      if (apiUtil.isSuccessed(res)) {
        handleSuccessed()
        handleClose()
        notification.success({
          message: `${actionType.value}成功`,
          description: `${actionType.value}成功`,
        })
      } else {
        notification.error({
          message: '提交失败',
          description: res.message,
        })
      }
    })
  }
}

function handleGetDetail() {
  if (!props.dataId) return
  api.getById(props.dataId).then((res) => {
    if (apiUtil.isSuccessed(res)) {
      formData.value = res.data
    }
  })
}

// ============ 生命周期 ============
onMounted(() => {
  roleApi.getSelectorOptions().then((res) => {
    if (apiUtil.isSuccessed(res)) {
      roleList.value = res.data
    }
  })

  orgApi.getTreeSelector().then((res) => {
    if (apiUtil.isSuccessed(res)) {
      orgTree.value = res.data
    }
  })

  if (props.dataId) {
    handleGetDetail();
    actionType.value = '修改';
  } else {
    formData.value = new AuthUser();
    actionType.value = '添加';
  }
})

// ============ Watch 监听 dataId ============
watch(
    () => props.dataId,
    (newVal) => {
      console.log('dataId changed:', newVal)
      if (newVal) {
        handleGetDetail()
      } else {
        formData.value = new AuthUser();
      }
    }
)
</script>
